@import 'mo/style/common';

#{$statusBar} {
    align-items: center;
    background-color: var(--statusBar-background);
    border-color: var(--statusBar-border);
    border-top: 1px solid var(--statusBar-border);
    bottom: 0;
    color: var(--statusBar-foreground);
    display: flex;
    height: 22px;
    justify-content: center;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 1;

    &__left-items,
    &__right-items {
        align-items: center;
        display: flex;
        height: 100%;
    }

    &__left-items {
        flex-grow: 1;

        > :first-child {
            margin-left: 7px;
        }
    }

    &__right-items {
        direction: rtl;

        > :first-child {
            margin-right: 7px;
        }
    }

    &__item {
        height: 100%;

        a {
            align-items: center;
            color: inherit;
            cursor: pointer;
            display: flex;
            height: 100%;
            outline-width: 0;
            padding: 0 5px;
            text-overflow: ellipsis;
            white-space: pre;
        }

        &:hover {
            background-color: var(--statusBarItem-hoverBackground);
        }

        &:active {
            background-color: var(--statusBarItem-activeBackground);
        }

        .codicon {
            font-size: 14px;
        }
    }
}
